<template>
  <div class="page-content">
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="名称/编号">
            <el-input v-model="query.sw" placeholder="名称/编号" clearable @input="handleSwChange"/>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="编号" />
      <el-table-column prop="name" label="名称" />
    </el-table>
    <div style="height: 50px;">
    <pagination v-model:size="query.pageSize" v-model:page="query.pageNum" :total="total" @pagination="getList" />
    </div>
  </div>
  <div style="text-align: center">
    <el-button @click="handleClose" type="primary">确定</el-button>
  </div>
</template>
<script>
import Pagination from "../../component/pagination.vue";
import {listBySw,remove} from '/http/terminal.js'
import {tranTable} from '/http/options.js'

export default {
  components: {Pagination},
  setup(props,context) {
    const tableData = ref([]);
    const total = ref(1);
    const selectRows = ref([])
    const query = reactive({
      sw:'',
      pageSize:100,
      pageNum:1
    })
    //const query = toRefs(react);
    const getList=()=>{
      listBySw(query).then(res=>{
        const data =ref(res.data.data)
        tranTable(data.value,{gatewayCode:'gateway',profileCode:'profile'});
        tableData.value = res.data.data;
        total.value = parseInt(res.data.total);
      })
    }

    const handleSwChange =(val)=>{
      getList()
    }

    const handleSelection = (val) => {
      selectRows.value = val
    }

    const handleClose = (refresh)=>{
      context.emit('close',selectRows.value)
    }

    getList();
    return {
      tableData,
      query,
      getList,
      handleSelection,
      handleClose,
      handleSwChange,
      total};
  }
}
</script>
<style scoped>

</style>